import React from 'react';
import {Platform, SafeAreaView, StatusBar, StyleSheet, Text, TouchableOpacity, View,} from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';

interface HeaderProps {
    navigation: any;
    title: string;
    rightText?: string;
    onRightPress?: () => void;
}

export const ScreenHeader: React.FC<HeaderProps> = ({ navigation, title, rightText, onRightPress }) => {
    return (
        <SafeAreaView style={styles.safeArea}>
            <StatusBar barStyle="dark-content" backgroundColor="#FFFFFF"/>
            <View style={styles.headerContainer}>
                <TouchableOpacity onPress={() => navigation.goBack()} style={styles.leftButton}>
                    <Icon name="chevron-back-outline" size={28} color="#FFF" />
                </TouchableOpacity>
                <View style={styles.titleContainer}>
                    <Text style={styles.titleText}>{title}</Text>
                </View>
                <TouchableOpacity onPress={onRightPress} style={styles.rightButton}>
                    <Text style={styles.rightText}>{rightText}</Text>
                </TouchableOpacity>
            </View>
        </SafeAreaView>
    );
};

const styles = StyleSheet.create({
    safeArea: {
        marginTop: Platform.OS === 'ios' ? 0 : StatusBar.currentHeight,
        backgroundColor: '#1BADFF',
    },
    headerContainer: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        height: 50,
        paddingHorizontal: 10,
        borderBottomWidth: StyleSheet.hairlineWidth,
        borderBottomColor: '#ccc',
    },
    leftButton: {
        width: 50,
        justifyContent: 'center',
        alignItems: 'flex-start',
    },
    titleContainer: {
        flex: 1,
    },
    titleText: {
        fontSize: 18,
        color: '#FFF',
    },
    rightButton: {
        width: "auto",
        justifyContent: 'center',
        alignItems: 'flex-end',
    },
    rightText: {
        fontSize: 16,
        color: '#FFF',
    },
});
